<template>
  <div class="directory-main">
    <div class="directory-row">
      <div class="serial-number">
        <span>{{ courseData.courseName }}</span>
      </div>
      <div class="video-content">
        <div>
          <Icon
            type="md-arrow-dropright-circle"
            size="16"
            :color="changeColor(courseData.isCharge)"
          />
          <span
            :style="`color:${changeColor(courseData.isCharge)}`"
            class="video-title"
            >{{ courseData.fileName }}</span
          >
        </div>
        <div class="play-detail">
          <!-- 0秒则不是视频  隐藏 -->
          <span :style="`color:${changeColor(courseData.isCharge)}`"
          v-if="( $options.filters.getHMS(courseData.courseDuration)=='0秒')"
          >{{
          }}</span>
          <span :style="`color:${changeColor(courseData.isCharge)}`"
          v-else
          >{{
            $options.filters.getHMS(courseData.courseDuration)
          }}</span>
          <span
            v-if="courseData.isCharge == 0"
            class="free-proved"
            @click="freeTrial(courseData)"
            >立即观看</span
          >
          <Icon
            v-if="courseData.isCharge == 1 && payStatus == 'UNPAID'"
            type="ios-unlock-outline"
            size="18"
            class="lock"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    //根据类型切换颜色
    changeColor(isCharge) {
      let lock = "#c6ccd4";
      let unlock = "#fa7e7e";
      if (isCharge == 1) {
        return lock;
      } else {
        return unlock;
      }
    },
    // 免费试看
    freeTrial(val) {
      this.$emit("freeTrial", val);
    },
  },
  props: {
    courseData: { type: Object, default: {} },
    payStatus: { type: String, default: "" },
  },
};
</script>
<style lang="scss" scoped>
.directory-main {
  height: auto;
  padding: 0px calc(40 / 1920 * 100vw);
  display: block;
  .directory-row {
    width: 100%;
    padding: calc(12 / 1920 * 100vw) 0px;
    border-bottom: 1px solid rgb(239, 235, 235);
    .serial-number {
      font-size: calc(18 / 1920 * 100vw);
      font-family: PingFang SC;
      font-weight: 500;
      color: #3e3d3d;
      line-height: calc(24 / 1920 * 100vw);
      display: flex;
      justify-content: space-between;
      .lock {
        cursor: pointer;
      }
    }
    .video-content {
      display: flex;
      justify-content: space-between;
      font-size: calc(14 / 1920 * 100vw);
      color: #c6ccd4;
      padding-left: calc(26 / 1920 * 100vw);
      margin-top: calc(8 / 1920 * 100vw);
      .video-title {
        margin-left: calc(8 / 1920 * 100vw);
      }
      .play-detail {
        display: flex;
        justify-content: space-between;
        width: 30%;
        .free-proved {
          color: #6fdacf;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
